<template>
  <div id="meta-table">
    <el-table
      :data="data"
      border
      :header-cell-style="tableHeaderColor"
      :cell-style="tableCellColor"
    >
      <el-table-column v-if="isIndex" type="index" class="table-index" />
      <el-table-column
        v-for="(item, index) in colConfig"
        :key="index"
        :prop="item.prop"
        align="center"
        :label="item.label"
        :show-overflow-tooltip="true"
        :width="item.minWidth"
      />
    </el-table>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
  colConfig: {
    type: Array,
    default: [],
  },
  isIndex: {
    type: Boolean,
    default: false,
  },
  height: {
    type: String,
    default: "100%",
  },
});

/** 自定义表头样式- */
const tableHeaderColor = ({ row, column, rowIndex, columnIndex }) => {
  let styleObj = {
    color: "black",
    "font-size": "12px",
    "font-weight": 700,
    background: "#f5f5f5",
    height: "30px",
    padding: "2px",
    "line-height": 1,
  };
  return styleObj;
};
/** 表格单元格样式 */
const tableCellColor = ({ row, column, rowIndex, columnIndex }) => {
  let indexStyleObj = {
    color: "black",
    "font-size": "12px",
    "font-weight": 700,
    background: "#f5f5f5",
    height: "30px",
    padding: "2px",
    "line-height": 1,
  };
  let styleObj = {
    "font-size": "12px",
    height: "30px",
    padding: "2px",
    "line-height": 1,
  };
  return column.type === "index" ? indexStyleObj : styleObj;
};
</script>

<style scoped lang="scss">
#meta-table {
  width: 100%;
  height: 100%;
}
:deep(.el-table) {
  height: 100%;
}
:deep(.el-table__inner-wrapper) {
  height: 100% !important ;
}
</style>
